---
title: Single horizontal list
description: A guide to use Fluid DnD with a single horizontal list.
---

import SingleHorizontalList from "@/components/vue/SingleHorizontalList.vue";
import { Code } from "@astrojs/starlight/components";

### List of number example

In this example we'll use **Fluid DnD** for sorting a horizontal list.
First, we're going to create a list of numbers and adding the property `direction` with value `horizontal`:

export const listOfNumbers = `<script setup lang="ts">
    const list = ref([1, 2, 3, 4, 5]);
    const [ parent ] = useDragAndDrop(list, { direction: "horizontal" });
</script>`;

<Code code={listOfNumbers} lang="vue" />

### Creating the view

export const highlightsDnD = ['direction="horizontal"','.number-list'];

export const listOfNumberInsideDnD = `
<template>
  <div ref="parent" class="number-list">
    <div class="number" v-for="(element, index) in list" :index="index">
      {{ element }}
    </div>
  </div>
</template>

<style>
/* ... */
.number-list {
  display: flex;
  flex-direction: row;
}
</style>

`;

<Code code={listOfNumberInsideDnD} lang="vue" mark={highlightsDnD} />

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <SingleHorizontalList client:load />
</div>
